<template>
    <div class="news">
        <!-- 按钮组 -->
        <div>
            <div class="left">
                <el-button size='small' @click='showDialog'>新增</el-button>
            </div>
            <div class="right">
                <!-- {{obj}} -->
                <el-form size='small' :inline="true" :model="obj" class="demo-form-inline">
                    <el-form-item>
                        <el-input v-model="obj.title" placeholder="请输入标题"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select clearable v-model="obj.categoryId" placeholder="请选择所属栏目">
                            <el-option v-for='item in categories' :key='item.id' :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <!-- 表格 -->
        <el-table
            size='small'
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
            prop="id"
            label="编号"
            width="80">
            </el-table-column>
            <el-table-column
            prop="title"
            label="标题">
            </el-table-column>
            <el-table-column
            prop="category.name"
            label="所属分类"
            width='160'>
            </el-table-column>
            <el-table-column
            prop="publishTime"
            label="发布时间"
            width="140">
                <template v-slot='scope'>
                    {{scope.row.publishTime | dateFMT}}
                </template>
            </el-table-column>
            <el-table-column
            prop="readTimes"
            label="阅读次数"
            width="100">
            </el-table-column>
            <el-table-column
            prop="thumpUp"
            label="点赞"
            width="100">
            </el-table-column>
            <el-table-column
            prop="status"
            label="状态"
            width="100">
            </el-table-column>
            <el-table-column
            label="操作"
            width="100">
                <template v-slot='scope'>
                    <a href="" @click.prevent='toDelete(scope.row)'>删除</a>
                    <!-- prevent用于阻止标签的默认行为 -->
                    <a href="" @click.prevent='toEdit(scope.row)'>修改</a>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页按钮 -->
        <el-pagination
            layout="prev, pager, next"
            :current-page='obj.page'
            :page-size='obj.pageSize'
            @current-change='chagePage'
            :total="total">
        </el-pagination>

        <!-- 模态框 -->
        <el-dialog width='80%' title="发布新闻资讯" :visible.sync="dialogFormVisible">
            <!-- {{form}} -->
            <el-form :model="form">
                <el-form-item label="新闻标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属分类" :label-width="formLabelWidth">
                    <el-select v-model="form.categoryId" placeholder="请选择活动区域">
                        <el-option v-for='item in categories' :key='item.id' :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="新闻内容" :label-width="formLabelWidth">
                    <Tinymce v-model="form.content" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveNews">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import axios from '@/http/axios'
import moment from 'moment'
// 导入富文本编辑器
import Tinymce from '@/components/Tinymce'
import qs from 'qs'
export default {
    // 注册组件
    components: {
        Tinymce
    },
    // 局部过滤器，一般用在{{}}内部
    filters:{
        dateFMT(str){
            return moment(str).format('YYYY-MM-DD HH:mm:ss')
        }
    },
    data(){
        return {
            obj:{
                page:1,
                pageSize:10
            },
            tableData:[],
            total:0,
            form:{},
            categories:[],
            dialogFormVisible:false,
            formLabelWidth:'120px'
        }
    },
    created(){
        this.findAllNews()
        this.findAllCategory()
    },
    // 深度监听
    watch: {
        obj:{
            handler: function(){
                this.findAllNews()
            },
            deep:true
        }
    },
    methods:{
        // 删除
        toDelete(item){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 如果用户点击了确定按钮时，执行then里面的代码，也就是发送删除的请求
                axios({
                    url:'http://39.96.21.48:8001/article/deleteById',
                    method: 'get',
                    params:{
                        id:item.id
                    }
                }).then((res)=>{
                    // 1. 弹出提示框
                    this.$notify({
                        title: '成功',
                        message: res.data.message,
                        type: 'success'
                    });
                    // 2. 刷新数据
                    this.findAllNews()
                })
            }).catch(() => {
                this.$notify({
                    title: '成功',
                    message: '取消成功',
                    type: 'success'
                });       
            });
        },
        // 修改事件
        toEdit(data){
            // 1. 显示模态框
            this.dialogFormVisible = true
            // 2. 将当前行的数据显示到模态框内
            this.form = JSON.parse(JSON.stringify(data))
        },
        // 保存新闻
        saveNews(){
            axios({
                url:'http://39.96.21.48:8001/article/saveOrUpdate',
                method:'POST',
                data:qs.stringify(this.form),
                contentType:'application/x-www-form-urlencoded'
            }).then((res)=>{
                // 1. 关闭模态框
                this.dialogFormVisible = false;
                // 2. 刷新数据
                this.findAllNews()
                // 3. 弹出提示框
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                });
            })
        },
        // 显示模态框
        showDialog(){
            // 1. 显示模态框
            this.dialogFormVisible = true
            // 2. 清空表单内容
            this.form = {}
        },
        // 查询所有的栏目
        findAllCategory(){
            axios({
                url:'http://39.96.21.48:8001/category/findAll',
                method: 'GET'
            }).then((res)=>{
                this.categories = res.data.data
            })
        },
        // 页码改变事件
        chagePage(page){
            this.obj.page = page
        },
        // 查询所有的新闻
        findAllNews(){
            axios({
                url:'http://39.96.21.48:8001/article/pageQuery',
                method:'get',
                params:this.obj
            }).then((res)=>{
                this.tableData = res.data.data.list
                this.total = res.data.data.total
            })
        }
    }
}
</script>

<style scoped>
    /* scoped是为了防止样式污染，style标签内部的所有的样式只在当前页面生效 */
    .left {
        float: left;
    }
    .right {
        float: right;
    }
</style>